<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>如风壁纸 - 设置</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body class="bg-gray-50 text-gray-900 font-sans">
    <div id="app" class="phone-container relative overflow-hidden mx-auto">
        <!-- Status Bar -->
        <div id="status-bar" class="status-bar flex justify-between items-center px-5 py-1 bg-black bg-opacity-10 text-white text-xs">
            <span id="time">9:41</span>
            <div class="status-icons flex space-x-1">
                <span><i class="fas fa-signal"></i></span>
                <span><i class="fas fa-wifi"></i></span>
                <span><i class="fas fa-battery-three-quarters"></i></span>
            </div>
        </div>

        <!-- Main Content Area -->
        <div id="content" class="content-area bg-white">
            <!-- Settings Content -->
            <div class="p-4">
                <h1 class="text-2xl font-bold mb-4">设置</h1>
                
                <ul class="settings-list">
                    <li class="settings-item">
                        <div class="settings-icon">
                            <i class="fas fa-moon"></i>
                        </div>
                        <div class="flex-1">
                            <div class="font-medium">深色模式</div>
                            <div class="text-sm text-gray-500">切换应用外观主题</div>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" id="dark-mode-toggle">
                            <span class="slider"></span>
                        </label>
                    </li>
                    
                    <li class="settings-item">
                        <div class="settings-icon" style="background-color: var(--color-secondary);">
                            <i class="fas fa-download"></i>
                        </div>
                        <div class="flex-1">
                            <div class="font-medium">自动保存</div>
                            <div class="text-sm text-gray-500">设置壁纸时自动保存到相册</div>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" id="auto-save-toggle" checked>
                            <span class="slider"></span>
                        </label>
                    </li>
                    
                    <li class="settings-item">
                        <div class="settings-icon" style="background-color: var(--color-accent);">
                            <i class="fas fa-bell"></i>
                        </div>
                        <div class="flex-1">
                            <div class="font-medium">壁纸推送</div>
                            <div class="text-sm text-gray-500">每日接收精选壁纸通知</div>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" id="notification-toggle">
                            <span class="slider"></span>
                        </label>
                    </li>
                    
                    <li class="settings-item" id="quality-setting">
                        <div class="settings-icon" style="background-color: #6c5ce7;">
                            <i class="fas fa-paint-brush"></i>
                        </div>
                        <div class="flex-1">
                            <div class="font-medium">壁纸质量</div>
                            <div class="text-sm text-gray-500">选择适合您设备的壁纸质量</div>
                        </div>
                        <div class="text-blue-500">高清</div>
                    </li>
                    
                    <li class="settings-item" id="about-setting">
                        <div class="settings-icon" style="background-color: #e17055;">
                            <i class="fas fa-info-circle"></i>
                        </div>
                        <div class="flex-1">
                            <div class="font-medium">关于我们</div>
                            <div class="text-sm text-gray-500">应用版本 1.0.0</div>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </li>
                    
                    <li class="settings-item" id="clear-cache">
                        <div class="settings-icon" style="background-color: #f6b93b;">
                            <i class="fas fa-broom"></i>
                        </div>
                        <div class="flex-1">
                            <div class="font-medium">清除缓存</div>
                            <div class="text-sm text-gray-500">释放设备存储空间</div>
                        </div>
                        <div class="text-gray-400 text-sm">23.5MB</div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Tab Bar -->
        <div id="tab-bar" class="tab-bar flex justify-around items-center px-2 py-3 bg-white border-t border-gray-200">
            <a href="home.html" class="tab-item flex flex-col items-center text-gray-500">
                <i class="fas fa-home text-lg"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="categories.html" class="tab-item flex flex-col items-center text-gray-500">
                <i class="fas fa-th-large text-lg"></i>
                <span class="text-xs mt-1">分类</span>
            </a>
            <a href="favorites.html" class="tab-item flex flex-col items-center text-gray-500">
                <i class="fas fa-heart text-lg"></i>
                <span class="text-xs mt-1">收藏</span>
            </a>
            <a href="settings.html" class="tab-item flex flex-col items-center text-blue-500">
                <i class="fas fa-cog text-lg"></i>
                <span class="text-xs mt-1">设置</span>
            </a>
        </div>
    </div>

    <script src="js/app.js"></script>
    <script>
        // Initialize clock for this page
        function updateClock() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            document.getElementById('time').textContent = `${hours}:${minutes}`;
        }
        
        // Update clock
        updateClock();
        setInterval(updateClock, 60000);
        
        // Add event listeners to settings toggles
        document.querySelectorAll('.toggle-switch input').forEach(toggle => {
            toggle.addEventListener('change', () => {
                // Just for prototype demonstration - show a toast message
                showToast(`${toggle.id} 已${toggle.checked ? '开启' : '关闭'}`);
            });
        });
        
        // Add event listeners to other settings options
        document.getElementById('quality-setting').addEventListener('click', () => {
            showQualityOptions();
        });
        
        document.getElementById('about-setting').addEventListener('click', () => {
            showAboutModal();
        });
        
        document.getElementById('clear-cache').addEventListener('click', () => {
            showToast('缓存已清除');
            document.querySelector('#clear-cache .text-gray-400').textContent = '0MB';
        });
        
        // Show toast message (simplified)
        function showToast(message) {
            // Create toast element
            const toast = document.createElement('div');
            toast.className = 'fixed bottom-20 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-75 text-white px-4 py-2 rounded-full text-sm z-50';
            toast.textContent = message;
            
            // Add to document
            document.body.appendChild(toast);
            
            // Remove after timeout
            setTimeout(() => {
                toast.style.opacity = '0';
                toast.style.transition = 'opacity 0.3s ease';
                setTimeout(() => toast.remove(), 300);
            }, 2000);
        }
        
        // Show quality options modal
        function showQualityOptions() {
            // Create modal element
            const modal = document.createElement('div');
            modal.className = 'fixed inset-0 flex items-end justify-center bg-black bg-opacity-50 z-50';
            
            modal.innerHTML = `
                <div class="bg-white rounded-t-xl w-full">
                    <div class="p-4 border-b border-gray-200">
                        <h3 class="text-center font-bold text-lg">壁纸质量</h3>
                    </div>
                    <div class="p-4">
                        <div class="option-item py-3 flex items-center">
                            <div class="flex-1">标准</div>
                            <div class="w-6"><i class="fas fa-circle text-gray-300"></i></div>
                        </div>
                        <div class="option-item py-3 flex items-center">
                            <div class="flex-1">高清</div>
                            <div class="w-6"><i class="fas fa-check-circle text-blue-500"></i></div>
                        </div>
                        <div class="option-item py-3 flex items-center">
                            <div class="flex-1">超高清</div>
                            <div class="w-6"><i class="fas fa-circle text-gray-300"></i></div>
                        </div>
                    </div>
                    <div class="p-4 border-t border-gray-200">
                        <button id="close-modal" class="w-full py-3 text-blue-500 font-medium">关闭</button>
                    </div>
                </div>
            `;
            
            // Add to document
            document.body.appendChild(modal);
            
            // Add close button event
            document.getElementById('close-modal').addEventListener('click', () => {
                modal.remove();
            });
            
            // Add click on options
            modal.querySelectorAll('.option-item').forEach(item => {
                item.addEventListener('click', () => {
                    // Update check mark visual
                    modal.querySelectorAll('.option-item .w-6').forEach(icon => {
                        icon.innerHTML = '<i class="fas fa-circle text-gray-300"></i>';
                    });
                    item.querySelector('.w-6').innerHTML = '<i class="fas fa-check-circle text-blue-500"></i>';
                    
                    // Get selected quality
                    const quality = item.querySelector('.flex-1').textContent;
                    
                    // Update in main view
                    document.querySelector('#quality-setting .text-blue-500').textContent = quality;
                });
            });
            
            // Add click outside to close
            modal.addEventListener('click', (e) => {
                if (e.target === modal) modal.remove();
            });
        }
        
        // Show about modal
        function showAboutModal() {
            // Create modal element
            const modal = document.createElement('div');
            modal.className = 'fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50';
            
            modal.innerHTML = `
                <div class="bg-white rounded-xl w-5/6 p-5 text-center">
                    <div class="mb-4">
                        <i class="fas fa-leaf text-5xl text-green-500"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">如风壁纸</h3>
                    <p class="text-gray-500 mb-4">版本 1.0.0</p>
                    <p class="text-sm text-gray-600 mb-5">一款轻盈如风的壁纸应用，精选高质量图片，为您的设备带来清新与优雅。</p>
                    <button id="close-about" class="w-full py-3 bg-blue-500 text-white rounded-xl font-medium">确定</button>
                </div>
            `;
            
            // Add to document
            document.body.appendChild(modal);
            
            // Add close button event
            document.getElementById('close-about').addEventListener('click', () => {
                modal.remove();
            });
            
            // Add click outside to close
            modal.addEventListener('click', (e) => {
                if (e.target === modal) modal.remove();
            });
        }
    </script>
</body>
</html> 